<template>
  <div class="add">
    <div class="buttons">
      <el-button
        type="primary"
        icon="el-icon-back"
        size="small"
        @click="jump(-1)">返回</el-button>
    </div>
    <template>
      <el-row>
        <template v-for="(item, idx) in form.collection_point">
          <el-col :span="24" :key="'collection_point' + idx">
            <el-form :inline="true" label-width="80px">
              <el-form-item label="上车点">
                <el-input v-model.trim="item.title"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input :value="item.address" disabled></el-input>
              </el-form-item>
              <el-form-item label="经纬度">
                <el-input :value="(item.lng && item.lat) ? item.lng+','+item.lat : ''" disabled></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getPointByMap(item,idx)">地图选点</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </template>
        <el-col :span="24">
          <el-form label-width="80px">
            <el-form-item>
              <el-button type="primary" @click="submit">保存修改</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </template>
    <el-dialog ref="amap" title="高德地图" :visible.sync="showMapStatus">
      <div class="search">
        <el-input v-model="marker.searchAddress" placeholder="请输入详细地址" class="input-with-select">
          <el-button @click="getLocationByAddress" slot="append" type="success" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <el-amap
        :events="events"
        :zoom="zoom"
        ref="map"
        :center="initLngLat"
        :amap-manager="amapManager"
        :plugin="plugin"
        class="amap"
        vid="amapDemo">
        <el-amap-marker
          :position="marker.position"
          vid="index"></el-amap-marker>
      </el-amap>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showMapStatus = false">取 消</el-button>
        <el-button type="primary" @click="getAddress">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {amapManager} from 'vue-amap'
  export default {
    data () {
      return {
        initLngLat: [],
        amapManager,
        zoom: 12,
        events: {
          init: (o) => {
          },
          click: (e) => {
            console.log(e)
            this.marker.position = [e.lnglat.lng, e.lnglat.lat]
            this.getAddressByLocation()
          }
        },
        plugin: ['ToolBar'],
        showMapStatus: false,
        province: [],
        city: [],
        county: [],
        id: '',
        address: '',
        lng: '',
        lat: '',
        title: '',
        form: {
          address_info: {
            province: {
              id: '',
              name: '',
              code: ''
            },
            city: {
              id: '',
              name: '',
              code: ''
            },
            county: {
              id: '',
              name: '',
              code: ''
            }
          },
          collection_point: [
            {
              address: '',
              lng: '',
              lat: '',
              title: ''
            }
          ]
        },
        marker: {
          position: [],
          searchAddress: ''
        },
        mapIndex: null
      }
    },
    methods: {
      /**
       *  地图选点
       */
      getPointByMap (data, idx) {
        this.marker = {searchAddress: data.address, position: [data.lng, data.lat]}
        this.initLngLat = [data.lng, data.lat]
        this.showMapStatus = true
        // this.mapIndex = idx
      },
      /**
       * 经纬度解析
       */
      getLocationByAddress () {
        this.showLoading()
        this
          .$api
          .map
          .getLocationByAddress(this.marker.searchAddress, this.form.address_info.city.name)
          .then(r => {
            if (r.length < 1) {
              this.toast('没有搜索到相关信息,你可以切换城市试试...', 'warning')
              return false
            }
            this.initLngLat = r[0].location.split(',')
            this.marker.searchAddress = r[0].formatted_address
            this.marker.position = r[0].location.split(',')
          })
      },
      /**
       * 地址逆解析
       */
      getAddressByLocation () {
        this.showLoading()
        this
          .$api
          .map
          .getAddressByLocation(this.marker.position.join(','))
          .then(r => {
            this.marker.searchAddress = r.formatted_address
          })
      },
      /**
       * @purpose 获取所有省份
       */
      getProvince () {
        this
          .$api
          .area
          .item()
          .then(r => {
            this.province = r
          })
      },
      /**
       * @purpose 获取城市
       * @param e
       * @returns {boolean}
       */
      getCity (e) {
        this
          .$api
          .area
          .item(e)
          .then(r => {
            this.city = r
            this.county = []
          })
      },
      /**
       * 区/县
       */
      getCounty (e) {
        this
          .$api
          .area
          .item(e)
          .then(r => {
            this.county = r
          })
      },
      /**
       * @purpose 获取地址
       */
      getAddress () {
        this.form.collection_point = this.form.collection_point.map((item, idx) => {
          item.address = this.marker.searchAddress
          item.title = this.marker.searchAddress
          item.lng = this.marker.position[0]
          item.lat = this.marker.position[1]
          return item
        })
        this.showMapStatus = false
      },
      /**
       * @purpose 提交数据
       */
      submit () {
        let [data] = [...this.form.collection_point]
        data.id = this.id
        this.showLoading()
        this
          .$api
          .map
          .editorInfo(data)
          .then(r => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.jump(-1)
          })
          .catch(() => {
            this.jump(-1)
          })
      }
    },
    created () {
      this.getProvince()
      this.id = this.$route.params.uuid
      let data = this.$route.params.data
      console.log(data)
      // console.log(this.id)
      if (data) {
        this.form.collection_point.map(item => {
          item.title = data.title
          item.lng = data.lng
          item.lat = data.lat
          item.address = data.address
        })
      }
      console.log(this.marker)
    }
  }
</script>
<style lang="sass">
  .el-dialog__body
    padding: 0 20px
</style>
<style scoped lang="sass">
  .search
    width: 100%
    margin: 10px 0 20px 0
  .amap
    height: 500px
    .search-box
      position: absolute
      top: 25px
      left: 20px
    .amap-page-container
      position: relative
</style>
